<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工信息添加</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/add.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
</head>
<body>
<div class="container">
  <div class="form-header">
    <h1>添加员工信息</h1>
  </div>
  <form id="employeeForm">
    <div class="form-group">
      <label for="user_id">用户ID</label>
      <input type="number" id="user_id" name="user_id" class="form-control">
      <span class="form-note">（仅当员工需要系统账号时填写）</span>
    </div>

    <div class="form-group">
      <label for="name" class="required-field">姓名</label>
      <input type="text" id="name" name="name" class="form-control" maxlength="100" required>
    </div>

    <div class="form-group">
      <label for="position" class="required-field">职位</label>
      <input type="text" id="position" name="position" class="form-control" maxlength="100" required>
    </div>

    <div class="form-group">
      <label for="department" class="required-field">所属部门</label>
      <input type="text" id="department" name="department" class="form-control" maxlength="100" required>
    </div>

    <div class="form-group">
      <label for="hire_date" class="required-field">入职日期</label>
      <input type="date" id="hire_date" name="hire_date" class="form-control" required>
    </div>

    <div class="form-group">
      <label for="leave_date">离职日期</label>
      <input type="date" id="leave_date" name="leave_date" class="form-control">
      <span class="form-note">仅当员工离职时填写</span>
    </div>

    <div class="form-group">
      <label for="status" class="required-field">在职状态</label>
      <select id="status" name="status" class="form-control" required>
        <option value="">-- 请选择 --</option>
        <option value="在职">在职</option>
        <option value="离职">离职</option>
      </select>
    </div>

    <button type="submit" class="btn">提交信息</button>
  </form>
</div>

<script>
  $(function (){
    // 表单提交处理
    $('#employeeForm').on('submit', function(e) {
      e.preventDefault();

      // 获取表单数据
      var formData = $(this).serializeArray();
      formData.push({name: "option", value: "add"});

      // 显示加载状态
      var $btn = $(this).find('[type="submit"]');
      $btn.prop('disabled', true).text('提交中...');

      // 发送AJAX请求
      $.ajax({
        url: '${pageContext.request.contextPath}/oa.action',
        type: 'POST',
        data: $.param(formData), // 将数组转换为URL编码字符串
        dataType: 'json', // 明确指定期望JSON响应
        success: function(response) {
          if (response && response.success) {
            alert(response.msg || '添加成功');
            window.location.href = '${pageContext.request.contextPath}/pages/employee.jsp';
          } else {
            alert(response.msg || '添加失败');
          }
        },
        error: function(xhr) {
          var errorMsg = '请求失败: ';
          if (xhr.responseJSON && xhr.responseJSON.msg) {
            errorMsg += xhr.responseJSON.msg;
          } else {
            errorMsg += xhr.statusText;
          }
          alert(errorMsg);
        },
        complete: function() {
          $btn.prop('disabled', false).text('提交信息');
        }
      });
    });
  });
</script>
</body>
</html>